<template>
  <div>
    <!-- <a-alert message="Success Text" type="success">
      <p slot="description">
        Success Description <span style="color: red">Success</span> Description
        Success Description
      </p>
    </a-alert> -->
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
    >
      <template slot="custom" slot-scope="scope">
        <span>{{ scope }}</span>
      </template>

      <template slot="actions" slot-scope="scope">
          <div class="actions-flex-s">
            <a-icon key="setting" @click="handle(scope)" type="setting" />
            <a-icon key="edit" @click="handle(scope)" type="edit" />
            <a-icon key="ellipsis" type="ellipsis" />
          </div>

      </template>

      <a-row slot="footer" type="flex" justify="end">
        <a-pagination
          :default-current="current"
          :total="total"
          @showSizeChange="onShowSizeChange"
        />
      </a-row>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "商品信息",
    scopedSlots: { customRender: "custom" },
  },
  {
    title: "库存",
    dataIndex: "money",
  },
  {
    title: "售价",
    dataIndex: "price",
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
  },
  {
    title: "状态",
    dataIndex: "sell_state",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "actions" },
  },
];

export default {
  props: {
    current: {
      default: 1,
    },
    total: {
      default: 1,
    },
  },
  data() {
    return {
      data: [{ id: 1 }],
      columns,
    };
  },
  methods: {
    onShowSizeChange(e) {
      console.log(e);
    },
    getData() {},
  },
};
</script>
<style>
th.column-money,
td.column-money {
  text-align: right !important;
}
.actions-flex-s{
    display: flex;
    justify-content:space-around ;
    align-items: center;
        
}


</style>
